<template>
  <div id="app">
    <mt-header title="企业详情">
      <a slot="left" href="javascript:history.back(-1)">
        <mt-button icon="back">返回</mt-button>
      </a>
      <mt-button icon="more" slot="right"></mt-button>
    </mt-header>
    <main>
      <ul class="healthitem">
        <li>
          <p class="health-title"><label>企业名称:{{ this.enterprise.name}}</label></p>
          <div class="health-info">
            <span>
                <img src="../../img/users.jpg">
                     <p>
                       <label>法人:{{this.enterprise.govPerson}}</label>
                     <br>
                     <label>
                        电话:{{this.enterprise.contactPhone}}
                     </label>
                     </p>
                    </span> 评分等级：{{this.enterprise.scoreLevel}}
          </div>
          <div class="health-comman">
            企业地址<label>{{this.enterprise.address}}</label>
          </div>
  
          <div class="health-comman">
            许可证号<label>{{this.enterprise.code}}</label>
          </div>
          <div class="health-comman">
            有效期限<label>{{this.enterprise.versionDate}}</label>
          </div>
        </li>
      </ul>
    </main>
  </div>
</template>

<script type="text/ecmascript-6">
  import axios from 'axios';
  import {
    Header,
    Button
  } from 'mint-ui';
  import {
    EnterpriseCPData
  } from '../../api/api';
  export default {
    data() {
      return {
       enterprisename:'',
       enterprisecontent:{},
      };
    },
    components: {
      "mt-button": Button,
      "mt-header": Header,
    },
    created() {
         localStorage.setItem('enterprise', JSON.stringify({
                          Content:this.$route.query.Content
                        }));
        this.enterprise=JSON.parse(localStorage.getItem('enterprise')).Content
    },
    mounted: function() {
    },
    methods: {
     
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style lang="scss" scoped>
   .healthitem {
    width:100%;
    font-size: 1rem
    ;
    li {
      background: #fff;
      overflow: hidden;
      margin-bottom: 10px;
      -webkit-box-shadow:0 0 10px rgba(197, 199, 199, 0.5);  
     -moz-box-shadow:0 0 10px rgba(197, 199, 199, 0.5);  
      box-shadow:0 0 10px rgba(197, 199, 199, 0.5);  
      div {
        display: -webkit-flex;
        display: flex;
        justify-content:space-between;
        align-items: center;
        padding: 10px 5px;
      }
    }
  }
  .health-title{ 
    color: #686868;
    padding: 10px 0px;
    border-bottom: 1px solid #efefef;
    margin: 0px;
    label{
      padding: 0px 5px;

    }
  }
  .health-info{
    background: #f8f8f8;
    padding: 12px 0px;
    span{
      flex: 2;
          flex: 2;
    display: flex;
    align-items: center;
      img{
        width: 3rem;
        height: 3rem;
        float: left;
      }
      p{
       margin-left: 5px;
       label:last-child{
            margin-top: 10px;
            display: inline-block;
       }
      }
    }
  }
  .health-comman{
       padding: 10px 0px;
       color: #333333;
  }
</style>
